<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="~{common/common::head-fragment('用户主页')}">
</head>
<body style="margin-top: 65px;">

<div th:insert="~{common/common::header-fragment}"></div>

<div class="fly-home fly-panel">
    <div style="float: left; margin-left: 40px"><i class="iconfont icon-guanbi" onclick="goBack()"></i></div>
    <input type="hidden" id="userId" name="userId" th:value="${myUser.userId}">
    <img th:src="@{${myUser.headImgUrl}}" th:alt="${myUser.nickName}">
    <h1>
        <th:block th:text="${myUser.nickName}">昵称</th:block>
        <th:block th:if="${myUser.gender=='男'}">
            <i class="iconfont icon-nan"></i>
        </th:block>
        <th:block th:if="${myUser.gender=='女'}">
            <i class="iconfont icon-nv"></i>
        </th:block>
        <th:block th:if="${myUser.gender=='未知'}">
            <i class="iconfont icon-biaoqing"></i>
        </th:block>
        <th:block th:if="${(session.userRole.code eq 'admin' || session.userRole.code eq 'sysAdmin') && pageRole.code ne 'admin' && pageRole.code ne 'sysAdmin'}">
            <th:block th:if="${myUser.userStatus == 0}">
                <a class="layui-btn layui-btn-xs jie-admin" onclick="bannedUser()">
                    封号
                </a>
            </th:block>
            <th:block th:if="${myUser.userStatus == 2}">
                <a class="layui-btn layui-btn-xs jie-admin" onclick="unBannedUser()">
                    解封
                </a>
            </th:block>
        </th:block>
    </h1>

    <p class="fly-home-info">
        <i th:if="${myUser.userStatus==0}" class="iconfont icon-biaoqing1"></i>
        <span>
        <th:block th:if="${myUser.userStatus==0}">账号正常
        </th:block>
        <th:block th:if="${myUser.userStatus==2}">账号已被封
        </th:block>
        </span>
        <i class="iconfont icon-shijian"></i><span th:text="${#dates.format(myUser.createTime, 'yyyy-MM-dd')+' 加入'}"/>
        <i class="iconfont icon-chengshi"></i><span th:text="${myUser.location}">来自杭州</span>
    </p>

    <p class="fly-home-sign" th:text="${myUser.introduce}">我不怕千万人阻挡，只怕自己投降</p>
</div>

<div class="layui-container" style="width: 1400px">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6 fly-home-jie">
            <div class="fly-panel">
                <h3 class="fly-panel-title">
                    <th:block th:text="${myUser.nickName}"></th:block>
                    近期发布的帖子
                </h3>
                <ul class="jie-row">

                    <th:block th:unless="${#lists.isEmpty(recentPostList)}">
                        <th:block th:each="myPost : ${recentPostList}">
                            <li>
                                <a th:href="@{${'/detail/'+myPost.postId}}"
                                   th:text="${myPost.postTitle}">帖子标题</a>
                                <i th:text="${#dates.format(myPost.createTime, 'yyyy/MM/dd HH:mm:ss')}">2023/02/01</i>
                                <em class="layui-hide-xs">
                                    <th:block th:text="${myPost.postViews}"></th:block>
                                    阅/
                                    <th:block th:text="${myPost.postComments}"></th:block>
                                    答
                                </em>
                            </li>
                        </th:block>
                    </th:block>

                    <th:block th:if="${#lists.isEmpty(recentPostList)}">
                        <!-- 无数据时 -->
                        <div class="fly-none" th:if="${myUser.userStatus==0}" style="min-height: 50px; padding:30px 0; height:auto;">
                            <i style="font-size:14px;">没有发布任何帖子</i>
                        </div>
                        <div class="fly-none" th:if="${myUser.userStatus==2}" style="min-height: 50px; padding:30px 0; height:auto;">
                            <i style="font-size:14px;">用户封号中</i>
                        </div>
                    </th:block>

                </ul>
            </div>
        </div>

        <div class="layui-col-md6 fly-home-da">
            <div class="fly-panel">
                <h3 class="fly-panel-title">
                    <th:block th:text="${myUser.nickName}">昵称</th:block>
                    最近的评论
                </h3>
                <ul class="home-jieda">
                    <th:block th:if="${#lists.isEmpty(recentCommentList)}">
                        <th:block th:if="${myUser.userStatus==0}">
                            <div class="fly-none" style="min-height: 50px; padding:30px 0; height:auto;"><span>近期没有回复</span>
                            </div>
                        </th:block>
                    </th:block>

                    <th:block th:if="${myUser.userStatus==2}">
                        <div class="fly-none" style="min-height: 50px; padding:30px 0; height:auto;"><span>用户封号中</span>
                        </div>
                    </th:block>

                    <th:block th:if="${myUser.userStatus==0}">
                        <th:block th:unless="${#lists.isEmpty(recentCommentList)}">
                        <th:block th:each="recentComment : ${recentCommentList}">
                            <li>
                                <p>
                                    <span th:text="${#dates.format(recentComment.commentCreateTime, 'yyyy/MM/dd HH:mm:ss')}">1分钟前</span>
                                    在
                                    <a th:if="${recentComment.postTitle ne null}" th:href="@{${'/detail/'+recentComment.postId}}"
                                        th:text="${recentComment.postTitle}" target="_blank">
                                        评论
                                    </a>
                                    中评论：
                                </p>
                                <div class="home-dacontent" th:text="${recentComment.commentBody}">
                                </div>
                            </li>
                        </th:block>
                    </th:block>
                    </th:block>
                </ul>
            </div>
        </div>
    </div>
    <div id="bannedUserInfo" style="display: none">
        <div style="text-align: center" class="layui-input-inline">
            <form style="text-align: center" method="post" id="postForm" onsubmit="return false;" action="##">
                请选择封号结束时间
                <input class="layui-input" id="bannedTime" value="2023/03/07 21:01" type="datetime-local"
                       placeholder="yyyy/MM/dd HH:mm">
            </form>
        </div>
    </div>

    <div id="unBannedUserInfo" style="display: none; text-align: center">
        <div style="text-align: center;vertical-align: middle; flex: content"  class="layui-input-inline">
            <p style="text-align: center">确认要解封此用户吗?</p>
        </div>
    </div>
</div>

<div th:insert="~{common/common::footer}"></div>

<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript">
    layui.use(['layer', 'element', 'jquery'], function () {
        var layer = layui.layer, $ = layui.$, element = layui.element;
        var device = layui.device();
        //阻止IE7以下访问
        if (device.ie && device.ie < 8) {
            layer.alert('如果您非得使用 IE 浏览器访问社区，那么请使用 IE8+');
        }

        // 返回
        window.goBack = function (){
            history.back();
        }
        // 解封
        window.unBannedUser = function (){
            layer.open({
                type: 1//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层)
                , title: false //不显示标题栏
                , closeBtn: false
                , area: ['300px', '100px']//定义宽高
                , shade: 0.8//遮幕
                , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                , btn: ['完成', '取消']
                , btnAlign: 'c'//按钮排列：居中对齐
                , moveType: 1 //拖拽模式，0或者1
                , content: $("#unBannedUserInfo")//跳转到想要的界面，这里是我自己项目的跳转界面
                , yes: () => {
                    let userId = $("#userId").val();
                    let params = {
                        'userId': userId,
                    };
                    $.ajax({
                        type: "POST",
                        url: "/unBannedUser",
                        data: params,
                        async: false,
                        success: function (result) {
                            if (result.resultCode === 200) {
                                layer.msg("解封成功");
                            } else {
                                layer.msg(result.message);
                            }
                        },
                        error: function () {
                            layer.alert('操作失败!', {title: '提醒', skin: 'layui-layer-molv', icon: 2});
                        }
                    });

                    window.setTimeout(function () {
                        window.location.reload();
                    },700)
                }
            })
        };
        // 封号
        window.bannedUser = function () {
            layer.open({
                type: 1//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层)
                , title: false //不显示标题栏
                , closeBtn: false
                , area: ['400px', '400px']//定义宽高
                , shade: 0.8//遮幕
                , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                , btn: ['完成', '取消']
                , btnAlign: 'c'//按钮排列：居中对齐
                , moveType: 1 //拖拽模式，0或者1
                , content: $("#bannedUserInfo")//跳转到想要的界面，这里是我自己项目的跳转界面
                , yes: () => {
                    let userId = $("#userId").val();
                    let bannedTime = $("#bannedTime").val();
                    if(bannedTime.length === 0){
                        layer.alert('请输入日期!', {title: '提醒', skin: 'layui-layer-molv', icon: 2});
                        return;
                    }
                    let params = {
                        'userId': userId,
                        'maturityTime': new Date(bannedTime)
                    };
                    $.ajax({
                        type: "POST",
                        url: "/userBanned",
                        data: params,
                        async: false,
                        success: function (result) {
                            if (result.resultCode === 200) {
                                layer.msg("封号成功");
                            } else {
                                layer.msg(result.message);
                            }
                        },
                        error: function () {
                            layer.alert('操作失败!', {title: '提醒', skin: 'layui-layer-molv', icon: 2});
                        }
                    });
                    // top.location.href = '/index';
                    window.setTimeout(function () {
                        window.location.reload();
                    },700)
                }
            })
        };
    });

</script>
</body>
</html>